<template>
  <div
    class="connection-button flex flex-middle"
    v-if="config"
    :title="$bks.buildConnectionString(config)"
  >
    <x-button
      class="btn btn-link btn-icon"
      menu
    >
      <i class="material-icons">link</i>
      <span class="connection-name truncate expand">{{ connectionName }}</span>
      <span
        class="connection-type badge truncate"
        v-tooltip="databaseVersion"
      >{{ connectionType }}</span>
      <x-menu>
        <x-menuitem
          @click.prevent="disconnect(false)"
          class="red"
        >
          <x-label><i class="material-icons">power_settings_new</i>Disconnect</x-label>
        </x-menuitem>
        <x-menuitem @click.prevent="$modal.show('config-save-modal')">
          <x-label v-if="config.id">
            <i class="material-icons">edit</i>Edit Connection
          </x-label>
          <x-label v-else>
            <i class="material-icons">save</i>Save Connection
          </x-label>
        </x-menuitem>
      </x-menu>
    </x-button>

    <portal to="modals">
      <modal
        class="vue-dialog beekeeper-modal save-connection-modal"
        name="config-save-modal"
        height="auto"
        :scrollable="true"
      >
        <div class="dialog-content">
          <div
            v-if="errors"
            class="alert alert-danger"
          >
            <i class="material-icons">error_outline</i>
            <div class="alert-body flex-col">
              <span>Please fix the following errors:</span>
              <ul>
                <li
                  v-for="(e, i) in errors"
                  :key="i"
                >
                  {{ e }}
                </li>
              </ul>
            </div>
          </div>
          <SaveConnectionForm
            :select-input="true"
            @cancel="$modal.hide('config-save-modal')"
            :can-cancel="true"
            :config="config"
            @save="save"
          />
        </div>
      </modal>
    </portal>
    <portal to="modals">
      <modal
        class="vue-dialog beekeeper-modal"
        name="running-exports-modal"
        height="auto"
        :scrollable="true"
      >
        <form @submit.prevent="disconnect(true)">
          <div class="dialog-content">
            <div class="dialog-c-title">
              Confirm Disconnect
            </div>
            There are active exports running. Are you sure you want to disconnect?
          </div>
          <div class="vue-dialog-buttons">
            <button
              class="btn btn-flat"
              type="button"
              @click.prevent="$modal.hide('running-exports-modal')"
            >
              Cancel
            </button>
            <button
              class="btn btn-danger"
              type="submit"
            >
              Disconnect
            </button>
          </div>
        </form>
      </modal>
    </portal>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import SaveConnectionForm from '../../connection/SaveConnectionForm'
export default {
  components: {
    SaveConnectionForm
  },
  data() {
    return {
      errors: null
    }
  },
  computed: {
      ...mapState({'config': 'usedConfig'}),
      ...mapGetters({'hasRunningExports': 'exports/hasRunningExports', 'workspace': 'workspace', 'versionString': 'versionString'}),
      connectionName() {
        return this.config ? this.$bks.buildConnectionName(this.config) : 'Connection'
      },
      connectionType() {
        return `${this.config.connectionType}`
      },
      databaseVersion() {
        return this.versionString
      }
  },
  methods: {

    async save() {
      try {
        this.errors = null
        await this.$store.dispatch('saveConnection', this.config)
        await this.$store.dispatch('pins/maybeSavePins')
        await this.$store.dispatch('hideEntities/maybeSave')
        this.$modal.hide('config-save-modal')
        this.$noty.success("Connection Saved")
      } catch (error) {
        this.errors = [error.message]
      }

    },
    disconnect(force) {
      if (this.hasRunningExports && !force) {
        this.$modal.show('running-exports-modal')
      } else {
        this.$store.dispatch('disconnect')
      }
    }
  }
}
</script>
